<template>
  <div>
    <ul class="notice_box">
      <li class="notice_list" v-for="(item, index) in list" :key="index" @click="noticeClick(index)">
        <span class="notice_title">{{item.title}}</span>
        <div class="notice_time_back">
          <span class="notice_date">{{item.fabutime | fnDate}}</span>
          <img src="../../../assets/img/apply/ic_game_recommend_arrow_right.png" alt="" class="notice_right">
        </div>
      </li>
    </ul>
    <img class="img_empty" src="../../../assets/img/apply/ic_empty_footer.png" alt="">
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
    },
    methods: {
      noticeClick(index) {
        this.$router.push({
          path: '/notice_detail',
          query: {
            url: this.list[index].url,
            title1: this.list[index].title
          }
        })
      }
    },
  }
</script>

<style scoped>
.notice_box {
  width: 750px;
}

.notice_list {
  height: 100px;
  padding: 0 35px;
  line-height: 100px;
  font-size: 30px;
  border-bottom: 2px solid #eee;
  display: flex;
  justify-content: space-between;
}

.notice_title {
  display: block;
  width: 470px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.notice_date {
  font-size: 22px;
  color: #999;
}

.notice_right {
  display: block;
  width: 18px;
  height: 30px;
  margin-left: 30px;
}

.notice_time_back {
  display: flex;
  align-items: center;
}

.img_empty {
  display: block;
  width: 750px;
  padding: 50px 0 150px;
}
</style>